<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ionic CSS Test</title>
    <base href="./">
    <link href="./ionic/css/chunk-ionic.f5c8e0e3.css" rel="stylesheet">
    <link href="./ionic/css/app.7b141fc5.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .test-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            background: #d4edda;
            color: #155724;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>Ionic CSS 测试</h1>
        <div class="status">✓ 基础 HTML 加载成功</div>
        
        <div id="css-status">⏳ 检测 CSS 加载状态...</div>
        
        <!-- 测试 Ionic 组件样式 -->
        <div style="margin: 20px 0;">
            <h3>Ionic 样式测试：</h3>
            <div class="ion-padding">
                <p>这应该有 Ionic 的 padding 样式</p>
            </div>
        </div>
    </div>
    
    <script>
        console.log('Ionic CSS test page loaded');
        
        // 检测 CSS 是否加载
        function checkCSS() {
            const testDiv = document.createElement('div');
            testDiv.className = 'ion-padding';
            testDiv.style.visibility = 'hidden';
            document.body.appendChild(testDiv);
            
            const styles = window.getComputedStyle(testDiv);
            const padding = styles.getPropertyValue('padding');
            
            document.body.removeChild(testDiv);
            
            const statusDiv = document.getElementById('css-status');
            if (padding && padding !== '0px') {
                statusDiv.innerHTML = '✓ Ionic CSS 加载成功 (padding: ' + padding + ')';
                statusDiv.style.background = '#d4edda';
                statusDiv.style.color = '#155724';
            } else {
                statusDiv.innerHTML = '✗ Ionic CSS 加载失败';
                statusDiv.style.background = '#f8d7da';
                statusDiv.style.color = '#721c24';
            }
        }
        
        // 页面加载完成后检测
        window.onload = function() {
            setTimeout(checkCSS, 1000);
        };
    </script>
</body>
</html>